<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统工具</el-breadcrumb-item>
      <el-breadcrumb-item>Form表单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane label="普通表单">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="输入框">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="单选下拉">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                <el-option label="区域三" value="shanxi"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="多选下拉">
              <el-select multiple v-model="form.regions" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                <el-option label="区域三" value="shanxi"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间选择" label-width="80px">
              <el-col :span="8">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="1" style="text-align: center">-</el-col>
              <el-col :span="8">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="开关">
              <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="多选">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="单选">
              <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助" border></el-radio>
                <el-radio label="线下场地免费" border></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="计数器">
              <el-input-number v-model.number="form.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="文本框">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
      </el-tab-pane>
      <el-tab-pane label="表单2">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="级联选择器">
            <el-cascader
                    :props="{ checkStrictly: true }"
                    v-model="value"
                    :options="options"
                    @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="Slider滑块">
            <el-slider v-model="value2"></el-slider>
          </el-form-item>
          <el-form-item label="范围选择">
            <el-slider
                    v-model="value3"
                    range
                    :marks="marks">
            </el-slider>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload
                    :action="axios.defaults.baseURL+'/base/uploadImage'"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :headers="headerObj"
                    list-type="picture"
                    :on-success="handleSuccess"
                    name="image"
                    :file-list="picList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="文本编辑器">
            <quill-editor v-model="content" min-height="200px"></quill-editor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="表单3">
        <el-form ref="form" :model="form3" label-width="100px">
          <el-form-item label="评分">
            <el-rate v-model.number="form3.rate" show-text></el-rate>
          </el-form-item>
          <el-form-item label="颜色选择器">
            <el-color-picker v-model="form3.color"></el-color-picker>
          </el-form-item>
          <el-form-item>
            <el-transfer
                    :titles="titles"
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入城市拼音"
                    v-model="value"
                    :data="data">
            </el-transfer>
          </el-form-item>
          <el-form-item label="穿梭框">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    const generateData = _ => {
      const data = [];
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };

    return {
      titles: ['城市列表', '已选城市'],
      form3: {
        rate: null,
        color: '#409EFF',
        value: [],
      },
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      data: generateData(),
      content: '',
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      },
      picPreviewPath: '',
      // 图片预览对话框
      previewDialogVisible: false,
      picList: [],
      form:{
        name: '',
        region: '',
        regions: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        num: 0,
        desc: ''
      },
      value3: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '50%')
        }
      },
      value2: 50,
      value: ['zhinan','shejiyuanze','yizhi'],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  },
  methods: {
    // 处理图片预览
    handlePreview (file) {
      this.picPreviewPath = this.base_url + file.response.data.url;
      this.previewDialogVisible = true
    },
    // 处理移除图片的操作
    handleRemove (file) {
      // 1.获取将要删除图片的临时路径
      const name = file.response.data.name;
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.picList.findIndex(x => x.name === name);
      // 3.调用splice方法，移除图片信息
      this.picList.splice(i, 1)
    },
    // 监听图片上传成功事件
    handleSuccess (response) {
        // 1.拼接得到一个图片信息对象 临时路径
        const picInfo = {name: response.data.name, url: this.domain + response.data.url};
        // 2.将图片信息对象，push到pics数组中
        this.picList.push(picInfo)
    },
    handleChange(value){
      console.log(value);
    },
    onSubmit() {
      console.log(this.form3.color);
      this.$message.success("提交成功");
    }
  }
}
</script>
<style lang="less" scope>
  .ql-editor{
    min-height:200px;
  }
</style>